import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';
import { FormattedMessage} from 'react-intl';
import { List, InputItem, Button,Checkbox,Modal } from 'antd-mobile';
import { API } from '../api'

const CheckboxItem = Checkbox.CheckboxItem
const Alert = Modal.alert;


class App extends React.Component { 
	constructor(props) {
		super(props);        
        this.state={
            timeText:"",
            paying:false,
            orderDetail:{
                amount:0
            },
            pwd:'',
            show:false,
            payFailure:false,
            PayModel:{
                action:'',
                bizContent: ''
            }
        }
        this.orderNo = T.urlQuery("id") || T.urlQuery('orderNo');
	}

	componentDidMount(){
        this.handleTime();
        
        this.requestOrderDetail();
        T.setColor()
    }
    componentWillUnmount(){
        clearInterval(this.interval);
    }

    handleTime =()=>{
        const orderDetail = this.state.orderDetail ||{};

        //let createTime = + new Date(orderDetail.createTime);
        let time = 30*60;   //(30 *60)  - Math.round((+new Date() - createTime)/1000);
        if(time<=0){
            //alert("The order has expired.");
        }else{
            this.showTime(time);
            this.interval = setInterval(()=>{
                time= time-1;
                this.showTime(time);
    
                if(time<=0){
                    setTimeout(() => {
                        alert("The order has expired.");
                    }, 0);
                    clearInterval(this.interval);
                    
                    return;
                }
            },1000);
        }
    }

    showTime = (time)=>{
        var minute = Math.floor(time/60);
        var second = time%60;
        minute = minute < 10 ? "0" + minute:minute;
        second = second < 10 ? "0" + second:second;
        var text = minute + ':'+second;
        this.setState({timeText:text});
    }


    requestOrderDetail = ()=>{
        const detailDTO = T.fetch2({
            url: API.oderDetail.path,
            data: {
              orderNo:this.orderNo,
              onlyLocal: 'yes'
            }
        })
        detailDTO.then((res) => {
            if (res.success) {
              this.setState({
                orderDetail: res.data
              })
            }
        })
    }

    
    confirmToPay = ()=>{
       const payMentDTO =  T.fetch2({
            url: API.payMent.path,
            loading: true,
            data: {
                orderNo:this.orderNo,
                callbackUrl:window.location.origin+'/success-yj-en?orderNo='+this.orderNo
            }
        })
        payMentDTO.then((result) => {
            console.log(result)
            const PayModel = result.data
            this.setState({
                PayModel:{
                    action:PayModel.action,
                    bizContent:PayModel.bizContent
                }
            })
            window.setTimeout(()=>{
                document.forms[0].submit()
            },100)
        })  
    }

	showModal=()=>{ 
        const Lang = window.LangMessage ||{}
        Alert(Lang.pay || 'Pay', Lang.yjpay_tip || 'We will implement deductions from your Wallet once the policy is generated. Do you agree?', [
            { text: Lang.cancel || '取消', onPress: () => console.log('cancel') },
            { text: Lang.yes || 'Yes,I agree', onPress: () => this.confirmToPay() },
          ])
	}
	
	render() {
        const orderDetail = this.state.orderDetail;
        const Lang = window.LangMessage ||{}
        let  timeMsg = Lang.pay_notice_30 ||'请在-内完成支付，逾期订单将自动取消'
        timeMsg = timeMsg.replace(/－|-/i,this.state.timeText)
       // timeMsg = '時間制限が過ぎると、予約がキャンセルされますので、お手数ですが'+this.state.timeText+'以内で支払いお願いいたします。'

		return (<div className="surrender-payway pay-page"><div className="main bor-top pay" style={{paddingBottom:0}}>
        <div className="clearfix pay-tip">
        <img src="/assets/images/clock.png" className="mr10 mb5" width="15" height="15"/>
        {timeMsg}
        </div>

        <div className="mt30 bgfw pl30 pr30 f32 fc48">
            <div className="clearfix pt30 pb30 bor-bottom">
                <p className="fl "><FormattedMessage id='product_name' defaultMessage='商品名'/></p>
                <p className="fr">{orderDetail.channelGoodsName}</p>
            </div>
            <div className="clearfix pt30 pb30">
                <p className="fl"><FormattedMessage id='price' defaultMessage='价格'/></p>
                <p className="fr color-price">${T.formatPrice(T.cutPrice(orderDetail.amount))}</p>
            </div>
        </div>

        <div >
            <p className="f30 pt30 pb30 ml30 mr30 strong"><FormattedMessage id='pay_way' defaultMessage='支付方式'/></p>
            <div className="bgfw pl30 pr30" id="payWayChooseBox">
                 <div className="clearfix pt20 pb20 bor-bottom">
                    <div className="fl">
                    <div className="pay-icon yahoo-icon mr30 mt20"></div>
                    </div>
                    <div className="fl diy_color mt20 f30">wallet</div>
                    <div className="fr">
                    <CheckboxItem checked={true} />
                    </div>
                </div>
            </div>
        </div>

        <div className="footer diy_background pay-btn tac f30 fcw pt30" onClick={this.showModal}>
        <FormattedMessage id='pay_now' defaultMessage='立即支付'/>
        </div>
    </div>


     <form method='post' action={this.state.PayModel.action} style={{display:'none'}}>
        <input name='bizContent' value={this.state.PayModel.bizContent} />
     </form>

    </div>)
	}
}

export default App;   